<template>
  <div>
    <div class="topList">
      <router-link to="/appmain" class="topBtn">
        <i class="iconfont arrow-left">&#xe641;</i>
        <span>综合考试</span>
      </router-link>
    </div>
    <div class="examWrap">
      <div class="examNum">
        <span>总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分</span>：
        <span class="nums">{{totalscore}}</span>&nbsp;分
      </div>
      <div class="lastNum">
        <span>及格分数</span>：
        <span class="nums">{{passscore}}</span>&nbsp;分
      </div>
      <div class="timeLimt">
        <span>考试限时</span>：
        <span class="nums">{{examtime}}</span>&nbsp;分钟
      </div>
      <div class="major">
        <span>剩余考试次数</span>：
        <span class="nums">{{leftnum}}</span>&nbsp;次
      </div>
    </div>
    <div class="pass" v-if="ispass">
      <p>恭喜你考试已通过！</p>
    </div>
    <div class="startBtn" v-else>
      <el-button type="primary" @click="start">{{startnotice}}</el-button>
    </div>

    <div class="bottombar">
      <router-link to="/appmain">
        <img src="../../assets/app/home.png" alt />
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: null,
      totalscore: "",
      passscore: "",
      examtime: "",
      leftnum: "",
      startnotice: "开始考试",
      starttime: null,
      ispass: false
    };
  },
  mounted: function() {
    this.student = JSON.parse(localStorage.getItem("studentinfo"));
    this.loadinfo();
    this.$axios
      .get("/ExamStart/getispass", {
        params: { st_id: this.student.St_id }
      })
      .then(res => {
       
        if (res.data == "True") {
          this.ispass = true;
        }
      });
  },
  methods: {
    loadinfo() {
      this.$axios
        .get("/ExamStart/readyexam", {
          params: { st_id: this.student.St_id }
        })
        .then(res => {
       
          let examinfo = JSON.parse(res.data.examinfo);
          this.leftnum = JSON.parse(res.data.leftnum);
          localStorage.setItem("examinfo", res.data.examinfo);
          localStorage.setItem("order", 1);
          this.totalscore = examinfo.examtotal;
          this.passscore = examinfo.examave;
          this.examtime = examinfo.examtime;
            localStorage.setItem("examtime", examinfo.examtime);
          this.starttime = res.data.starttime;
          
          if (res.data.starttime != "NO") {
            this.startnotice = "继续考试";
            localStorage.setItem("examid", res.data.examid);
              localStorage.setItem("starttime", res.data.starttime);//上场考试开始时间
          }
        });
    },
    start() {
      if (this.leftnum == 0 && this.starttime == "NO") {
        alert("很遗憾，你的考试次数已用完，无法参加考试");
      } else {
       
        if (this.starttime == "NO") {
          this.$axios
            .get("/ExamStart/startexam", {
              params: { st_id: this.student.St_id }
            })
            .then(res => {
              let examid = res.data;
              localStorage.setItem("examid", examid);
              let date =new Date();
               localStorage.setItem("starttime", date.toString());//考试开始时间
              this.$router.push({ path: "/exampage" });
            });
        } else {
          this.$router.push({ path: "/exampage" });
        }
      }
    }
  }
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont"; /* project id 1514769 */
  src: url("//at.alicdn.com/t/font_1514769_4qk754zzrki.eot");
  src: url("//at.alicdn.com/t/font_1514769_4qk754zzrki.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1514769_4qk754zzrki.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1514769_4qk754zzrki.woff") format("woff"),
    url("//at.alicdn.com/t/font_1514769_4qk754zzrki.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1514769_4qk754zzrki.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 25px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: sub;
}
.topList {
  height: 3rem;
  width: 100%;
  line-height: 2.5rem;
  /* border:1px solid red; */
  text-align: center;
  font-size: 18px;
  background-image: linear-gradient(135deg, #0396ff 10%, #abdcff 100%);
}
.topBtn {
  text-decoration: none;
  color: white;
  display: inline-block;
  width: 100%;
}
.arrow-left {
  float: left;
}
.pass {
  color: green;
  text-align: center;
  font-size: x-large;
}
.examWrap {
  font-size: 16px;
  width: 80%;
  margin: 20% 0 0 20%;
  color: #a0a0a0;
}
.examNum,
.lastNum,
.timeLimt,
.major {
  margin-bottom: 5px;
}
.nums {
  font-size: 19px;
  color: #139dff;
}
.examName {
  display: inline-block;
  width: 65%;
  vertical-align: text-top;
  color: #139dff;
  /* border: 1px solid; */
}
.startBtn {
  text-align: center;
  margin-top: 100px;
}
.el-button--primary {
  width: 80%;
}

.bottombar {
  position: fixed;
  z-index: 900;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* border: 1px solid white; */
  height: 50px;
  text-align: center;
  background: rgb(36, 164, 255);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
}
.bottombar img {
  background: white;
  padding: 10px;
  border-radius: 50%;
  position: relative;
  /* top: -20px; */
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  /* border: 5px solid gray; */
}
</style>
